<template>
  <!-- 编辑学员信息 -->
  <div class="edit-info flex-column">
    <p>选择已绑定学员</p>
    <div
      class="row-space-between select"
      @click="campusList.length == 0? campusPicker = false:campusPicker = true"
    >
      <p>{{campus}}</p>
      <div class="row-align-center">
        <van-icon name="cross" @click.stop="cancel"></van-icon>
        <p>▼</p>
      </div>
    </div>

    <p v-if="isAllSee == 1">新增学员</p>
    <van-form @submit="onSubmit" v-if="isAllSee == 1">
      <van-field
        v-model="stuname"
        name="stuname"
        label="姓名*"
        placeholder="请输入学员姓名"
        :rules="[{ required: true, message: '请填写学员姓名' }]"
        size="large"
        :disabled="isChoice"
      />
      <van-field name="sex" label="性别*">
        <template #input>
          <van-radio-group v-model="sex" direction="horizontal" :disabled="isChoice">
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
        v-model="idCard"
        type="number"
        name="idCard"
        label="身份证号*"
        placeholder="请输入学员身份证号"
        :rules="[{ validator:idValidator, message: '请输入正确的身份证号' }]"
        size="large"
        :disabled="isChoice"
      />
      <van-field
        readonly
        clickable
        name="birthday"
        :value="birthday"
        label="出生日期*"
        placeholder="请选择出生日期"
        @click="showPicker = false"
        :rules="[{ required: true, message: '请选择出生日期' }]"
        v-if="isChoice"
        right-icon="calender-o"
      />
      <van-field
        readonly
        clickable
        name="birthday"
        :value="birthday"
        label="出生日期*"
        placeholder="请选择出生日期"
        @click="showPicker = true"
        :rules="[{ required: true, message: '请选择出生日期' }]"
        v-else
        right-icon="calender-o"
      />
      <van-field
        v-model="name"
        name="name"
        label="您的姓名*"
        placeholder="请输入您的姓名"
        :rules="[{ required: true, message: '请填写您的姓名' }]"
        size="large"
        :disabled="isChoice"
      />
      <van-field
        readonly
        clickable
        name="relation"
        :value="relation"
        label="关系*"
        placeholder="请选择您与学员的关系"
        @click="showPicker2 = false"
        :rules="[{required:true,message:'请选择关系'}]"
        size="large"
        v-if="isChoice"
      />
      <van-field
        readonly
        clickable
        name="relation"
        :value="relation"
        label="关系*"
        placeholder="请选择您与学员的关系"
        @click="showPicker2 = true"
        :rules="[{required:true,message:'请选择关系'}]"
        size="large"
        v-if="!isChoice"
      />
      <div style="margin: 16px;">
        <van-button
          block
          type="info"
          native-type="submit"
          color="#6CC9D2"
          style="border-radius: 10px;border: 1px solid rgba(255, 255, 255, 0);position:absolute;bottom:30px;width:90%"
          v-if="!isChoice"
        >保存</van-button>
      </div>
    </van-form>
    <!--面向本校区课程 已选择绑定 -->
    <div style="margin: 16px;" v-if="isAllSee ==0">
      <van-button
        block
        type="info"
        color="#6CC9D2"
        @click="bindStu"
        style="border-radius: 10px;border: 1px solid rgba(255, 255, 255, 0);position:absolute;bottom:30px;width:90%"
      >保存</van-button>
    </div>
    <!--面向全部区课程 已选择绑定 -->
    <div style="margin: 16px;" v-if="isAllSee ==1 && isChoice">
      <van-button
        block
        type="info"
        color="#6CC9D2"
        @click="bindStu"
        style="border-radius: 10px;border: 1px solid rgba(255, 255, 255, 0);position:absolute;bottom:30px;width:90%"
      >保存</van-button>
    </div>
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        @confirm="dateConfirm"
        @cancel="showPicker = false"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
    <van-popup v-model="showPicker2" position="bottom">
      <van-picker
        show-toolbar
        :columns="relationList"
        @confirm="relationConfirm"
        @cancel="showPicker2 = false"
      />
    </van-popup>
    <van-popup v-model="campusPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="campusList"
        @confirm="campusConfirm"
        value-key="detail"
        @cancel="campusPicker = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { GetBindStu, EditStudent, CheckBindStudent } from "@/api/order";
import { mapGetters } from "vuex";
import { Toast } from "vant";
export default {
  data() {
    return {
      stuname: "",
      sex: "1",
      idCard: "",
      birthday: "",
      minDate: new Date(1950, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      name: "",
      relation: "",
      relationList: [
        "本人",
        "父亲",
        "母亲",
        "祖父",
        "祖母",
        "外祖父",
        "外祖母",
        "其他"
      ],
      showPicker: false,
      showPicker2: false,
      campusList: [],
      campusPicker: false,
      campus: "未选择",
      campusID: "",
      studentID: ""
    };
  },
  methods: {
    dateConfirm(date) {
      this.birthday = this.$moment(date).format("YYYY-MM-DD");
      this.showPicker = false;
    },
    relationConfirm(value) {
      this.relation = value;
      this.showPicker2 = false;
    },
    campusConfirm(value) {
      this.campus = value.studentName;
      this.campusID = value.campusID;
      this.studentID = value.studentID;
      this.campusPicker = false;
    },
    async onSubmit(values) {
      console.log("submit", values);
      Toast.loading({
        forbidClick: true,
        duration: 0
      });
      const result = await EditStudent({
        bindType: "新增",
        orderID: this.orderID,
        studentName: values.stuname,
        identityCardID: values.idCard,
        studentGender: values.sex,
        birthDate: values.birthday,
        parentName: values.name,
        relationship: values.relation
      });
      console.log(result);
      if (result.result == "OK") {
        setTimeout(() => {
          this.$router.back(-1);
        }, 3000);
        Toast.success("绑定成功！");
      } else {
        Toast.clear();
      }
    },
    // 取消选择学生
    cancel() {
      this.campus = "未选择";
      this.studentID = "";
      this.campusID = "";
    },
    // 选择绑定
    async bindStu() {
      if (this.campus == "未选择") {
        Toast.fail("请选择学员！");
      } else {
        const result = await EditStudent({
          bindType: "选择已绑定",
          orderID: this.orderID,
          studentID: this.studentID,
          campusID: this.campusID
        });
        console.log(result);
        if (result.result == "OK") {
          setTimeout(() => {
            this.$router.back();
          }, 1500);
          Toast.success("绑定成功！");
        } else {
          Toast.clear();
        }
      }
    },
    // 身份证校验
    idValidator(value) {
      return /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
        value
      );
    }
  },
  computed: {
    isChoice() {
      if (this.campus == "未选择") {
        return false;
      }
      return true;
    },
    ...mapGetters({
      phone: "getPhone",
      orderID: "getEditStuOrderId",
      isAllSee: "getAllSee"
    })
  },
  async created() {
    const result = await GetBindStu({
      orderID: this.orderID,
      parentAccount: this.phone
    });
    if (result.result == "OK") {
      result.data.forEach((item, index) => {
        let obj = Object.assign(
          {
            detail: item.studentName + "&nbsp&nbsp&nbsp" + item.campusName
          },
          item
        );
        this.campusList.push(obj);
      });
    }
    const res = await CheckBindStudent({
      orderNo: this.orderID
    });
    if (res.result == "OK") {
      const {
        data: {
          studentName,
          studentGender,
          identityCardID,
          birthDate,
          parentName,
          parentPhone,
          relationship
        }
      } = res;
      this.stuname = studentName;
      this.sex = studentGender;
      this.idCard = identityCardID;
      this.birthday = birthDate.slice(0, birthDate.indexOf(" "));
      this.name = parentName;
      this.relation = relationship;
    }
  }
};
</script>

<style scoped>
.edit-info {
  background-color: #f7f7f7;
  position: fixed;
  width: 100%;
  height: 100%;
}
p {
  margin: 12px;
}
.select {
  width: auto;
  margin: 0 5%;
  height: 36px;
  font-size: 14px;
  font-family: Microsoft Yahei;
  border: 1px solid rgba(187, 187, 187, 1);
  border-radius: 5px;
  align-items: center;
  background-color: #fff;
}
.select:active {
  border: 1px solid rgb(165, 164, 164);
  background-color: rgb(165, 164, 164);
}
</style>